<template>
  <el-form :inline="true" ref="editForm">
    <el-form-item prop="name" label="类别名称">
      <el-input :value="name" @input="$emit('update:name', $event)"></el-input>
    </el-form-item>
    <el-form-item label="父级类别" prop="parent">
      <el-cascader
        @change="$emit('update:parent', $event)"
        :options="commoditycategory.results"
        :props="{
          expandTrigger: 'hover',
          label: 'name',
          value: 'id',
          emitPath: false,
          checkStrictly: true,
        }"
      ></el-cascader>
    </el-form-item>
    <el-form-item label="显示顺序">
      <el-input-number
        :min="-999"
        :max="999"
        :value="sort_order"
        @input="$emit('update:sort_order', $event)"
      ></el-input-number>
    </el-form-item>
    <el-row>
      <el-form-item label="图片地址">
        <el-input
          :value="banner_image_alt"
          @change="$emit('update:banner_image_alt', $event)"
        ></el-input>
      </el-form-item>
    </el-row>

    <el-row>
      <el-form-item label="上传图片">
        <el-upload
          class="upload"
          action="#"
          list-type="picture-card"
          :http-request="upload"
          :file-list="imgArr"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import { mapState } from "vuex";
import { imageUpload } from "@/api/index";
export default {
  name: "CategoryEdit",
  props: {
    id: Number,
    name: String,
    description: String,
    sort_order: Number,
    parent: {},
    image: Number,
    banner_image_alt: String,
  },
  computed: {
    ...mapState("category", ["commoditycategory"]),
    imgArr() {
      return this.banner_image_alt ? [{ url: this.banner_image_alt }] : [];
    },
  },
  data() {
    return {};
  },
  methods: {
    async upload({ file }) {
      let fd = new FormData();
      fd.append("image", file);
      // 请求接口数据  // ！！！ 图片的大小不能超过8kb
      let { data } = await imageUpload(fd); // {image}
      console.log(data); // id  image (地址) image_alt
      // 与商品类别banner_image_alt进行关联
      this.$emit("update:banner_image_alt", data.image);
      this.$emit("update:image", data.id);
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
/*去除el-upload默认的过渡效果的样式*/
.upload ::v-deep.el-upload-list__item {
  transition: none !important;
}
</style>
